<template>
    <el-card class="reservation-card">
        <div class="card-content">
            <h3>预约信息</h3>
            <p><strong>创建时间:</strong> {{ formattedCreateTime }}</p>
            <p><strong>预约时间:</strong> {{ formattedReservationTime }}</p>
            <p><strong>预约地点:</strong> {{ reservation.locationName }}</p>
            <p><strong>预留电话:</strong> {{ reservation.userPhone }}</p>
            <p><strong>预约状态:</strong> {{ reservation.type }}</p>
        </div>
        <div class="card-image" v-if="reservation.locationPhoto">
            <img :src="reservation.locationPhoto" alt="Location Image" />
        </div>
    </el-card>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    reservation: {
        type: Object,
        required: true
    }
});

// 格式化创建时间
const formattedCreateTime = computed(() => {
    return new Date(props.reservation.createTime).toLocaleString(); // 根据需要调整格式
});

// 格式化预约时间
const formattedReservationTime = computed(() => {
    return new Date(props.reservation.time).toLocaleString(); // 根据需要调整格式
});
</script>

<style scoped>
.reservation-card {
    width: 100%;
    margin-bottom: 20px;
}

.card-content {
    padding: 20px;
}

.card-image {
    margin-top: 10px;
    text-align: center;
}

.card-image img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 10px;
}
</style>
